<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main flow-form-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="title" />
        <div class="options">
          <template>
            <el-button
              type="warning"
              @click="eventLauncher('save')"
              :loading="btnLoading"
              :disabled="allBtnDisabled"
              >{{ properties.saveBtnText || "确 定" }}</el-button
            >
            <!-- v-if="!setting.readonly" -->
            <el-button
              @click="goBack()"
              v-if="!setting.hideCancelBtn"
              :disabled="allBtnDisabled"
            >
              {{ $t("common.cancelButton") }}
            </el-button>
          </template>
        </div>
      </div>
      <div
        class="approve-result"
        v-if="(setting.opType == 0 || setting.opType == 4) && activeTab === '0'"
      >
        <div
          class="approve-result-img"
          :class="flowTaskInfo.status | flowStatus()"
        ></div>
      </div>
      <el-tabs class="jsbos-el_tabs" v-model="activeTab">
        <el-tab-pane label="申请内容" v-loading="loading">
          <component
            :is="currentView"
            :data="dataTransfer"
            @close="goBack"
            ref="form"
            @eventReceiver="eventReceiver"
            @setLoad="setLoad"
            @setCandidateLoad="setCandidateLoad"
            @setPageLoad="setPageLoad"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </transition>
</template>

<script>
import Comment from "./Comment";
import RecordSummary from "./RecordSummary";
import CandidateForm from "./CandidateForm";
export default {
  components: {
    Comment,
    RecordSummary,
    CandidateForm,
  },
  props: {
    data: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      title: "",
      dataTransfer: this.data,
      assignVisible: false,
      assignForm: {
        nodeCode: "",
        freeApproverUserId: "",
      },
      currentView: "",
      formData: {},
      setting: {},
      flowTaskInfo: {},
      properties: {},
      endTime: 0,
      visible: false,
      reason: "",
      handleId: "",
      activeTab: "0",
      loading: false,
      btnLoading: false,
      candidateLoading: false,
      candidateVisible: false,
      candidateList: [],
      candidateForm: {
        candidateList: [],
      },
      eventType: "",
      copyIds: [],
      fullName: "",
      thisStep: "",
      allBtnDisabled: false,
    };
  },
  created() {},
  computed: {},
  watch: {
    activeTab(val) {
      if (val === "comment") {
        this.$refs.comment && this.$refs.comment.init();
      }
      if (val === "recordSummary") {
        this.$refs.recordSummary && this.$refs.recordSummary.init();
      }
    },
  },
  methods: {
    goBack(isRefresh) {
      this.$emit("close", isRefresh);
    },
    init(data) {
      this.activeTab = "0";
      this.setting = data;
      this.getEngineInfo(data);
    },
    getEngineInfo(data) {
      var res = {
        formUrl: data.formUrl,
      };
      const formUrl = res.formUrl.replace(/\s*/g, "");
      console.log("res.data.formUrl" + res.formUrl);
      this.currentView = (resolve) => require([`@/views/${formUrl}`], resolve);

      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.init(data);
        });
      }, 500);
    },
    eventLauncher(eventType) {
      this.allBtnDisabled = true;
      setTimeout(() => {
        this.allBtnDisabled = false;
      }, 1000);
      this.btnLoading = true;
      this.$refs.form && this.$refs.form.dataFormSubmit(eventType);
      this.btnLoading = false;
    },
    eventReceiver(formData, eventType) {
      this.formData = formData;
      this.formData.flowId = this.setting.flowId;
      this.eventType = eventType;
      if (eventType === "save" || eventType === "submit") {
      }
      if (eventType === "saveAudit") {
        return this.saveAudit();
      }
      if (eventType === "audit" || eventType === "reject") {
        this.handleId = "";
        this.reason = "";
        this.copyIds = [];
        this.handleReset();
        if (eventType === "reject") return (this.visible = true);
        this.candidateLoading = true;
      }
    },
    setPageLoad(val) {
      this.loading = !!val;
    },
    setCandidateLoad(val) {
      this.candidateLoading = !!val;
    },
    setLoad(val) {
      this.btnLoading = !!val;
    },
  },
};
</script>
<style lang="scss" scoped>
.flow-form-main {
  el_tabs {
    overflow: hidden;
  }
}
</style>
